$datepicker-trigger-icon-width: 1.125rem !default;
$datepicker-trigger-icon-height: 1.25rem !default;
$datepicker-line-height: 1.5rem !default;
$datepicker-trigger-icon-color: $cool-grey !default;
$datepicker-trigger-icon-hover-color: $default-link !default;

$datepicker-panel-border: solid 1px #cecece !default;
$datepicker-panel-background-color: $white !default;
$datepicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06) !default;
$datepicker-panel-margin: 0 !default;
$datepicker-header-background-color: #e6ecef !default;
$datepicker-header-color: $cool-grey !default;
$datepicker-header-padding: 0 0.875rem !default;
$datepicker-header-line-height: 2.5rem !default;
$datepicker-header-border: none !default;

$datepicker-calendar-padding: 0.5rem 0.875rem !default;
$datepicker-calendar-header-font-size: 0.6875rem !default;
$datepicker-calendar-font-size: 0.875rem !default;
$datepicker-calendar-color: $body-color !default;
$datepicker-calendar-selected-color: $white !default;
$datepicker-calendar-selected-background-color: $default-link !default;
$datepicker-calendar-border: solid 1px rgba(#979797, 0.1) !default;

$timepicker-background-color: $datepicker-header-background-color !default;
$timepicker-color: $body-color !default;
$timepicker-padding: 0.5rem !default;
$timepicker-hour-padding: 0.5rem !default;
$timepicker-button-background-color: $default-link !default;
$timepicker-button-color: $white !default;
$timepicker-button-width: 0.875rem !default;
$timepicker-button-height: $timepicker-button-width !default;
$timepicker-button-border-radius: 2px !default;
$timepicker-separator-margin: 0 0.5rem !default;
$timepicker-border: none !default;

.rz-calendar {
  display: inline-block;
  position: relative;

  .rz-inputtext {
    @extend %input;
    width: 100%;
    line-height: $datepicker-line-height;
    padding-right: $datepicker-trigger-icon-width;
  }

  &:not(.rz-state-disabled) {
    &:hover {
      .rz-datepicker-trigger {
        box-shadow: none;
        color: $datepicker-trigger-icon-hover-color;
      }
    }
  }

  &.rz-state-disabled {
    .rz-inputtext {
      @extend %input-disabled;
    }
  }
}

.rz-calendar-inline {
  border: $input-border;
}

.rz-datepicker-trigger {
  box-shadow: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.625rem;
  background-color: transparent;
  padding: 0;
  vertical-align: text-top;

  &.rz-state-disabled {
    border: none;
    box-shadow: none;
  }

  color: $datepicker-trigger-icon-color;
  width: $datepicker-trigger-icon-width;
  height: $datepicker-trigger-icon-height;
  font-size: $datepicker-trigger-icon-height;

  &:hover {
    background-color: transparent;
  }

  &:active {
    box-shadow: none !important;
    background-image: none !important;
  }

  .rzi-calendar {
    font-size: inherit;
    vertical-align: top;
    &:before {
      content: 'calendar_today';
    }
  }

  .rz-button-text {
    display: none;
  }
}

.rz-datepicker {
  &:not(.rz-datepicker-inline) {
    box-sizing: content-box;
    margin: $datepicker-panel-margin;
    position: absolute;
    border: $datepicker-panel-border;
    box-shadow: $datepicker-panel-shadow;
    border-radius: $border-radius;
  }

  background-color: $datepicker-panel-background-color;
}

.rz-calendar {
  display: inline-block;
}

.rz-datepicker-inline {
  position: static;

  .rz-datepicker-group {
    display: inline-block;
  }
}

.rz-datepicker-header {
  position: relative;
  line-height: $datepicker-header-line-height;

  background-color: $datepicker-header-background-color;
  border-bottom: $datepicker-header-border;
  color: $datepicker-header-color;
  padding: $datepicker-header-padding;
}

.rz-datepicker-prev {
  float: left;
  height: $datepicker-header-line-height;

  .rzi-chevron-left {
    vertical-align: text-top;
    color: $datepicker-header-color;
    &:before {
      content: 'chevron_left';
    }
  }
}

.rz-datepicker-next {
  float: right;
  height: $datepicker-header-line-height;

  .rzi-chevron-right {
    vertical-align: text-top;
    color: $datepicker-header-color;
    &:before {
      content: 'chevron_right';
    }
  }
}

.rz-datepicker-title {
  text-align: center;
}

.rz-datepicker-calendar {
  table-layout: fixed;
  border-collapse: collapse;

  th {
    font-weight: normal;
    font-size: $datepicker-calendar-header-font-size;
    padding: $datepicker-calendar-padding;
    text-align: center;
  }

  td {
    text-align: center;
    border-top: $datepicker-calendar-border;
    padding: 0;

    .rz-state-default {
      display: block;
      padding: $datepicker-calendar-padding;
      color: $datepicker-calendar-color;
      font-size: $datepicker-calendar-font-size;

      &:hover {
        text-decoration: none;
        color: $datepicker-calendar-color;
        cursor: default;
      }
    }

    .rz-state-active {
      color: $datepicker-calendar-selected-color;
      background-color: $datepicker-calendar-selected-background-color;
      padding: $datepicker-calendar-padding;

      &:hover {
        color: $datepicker-calendar-selected-color;
      }
    }
  }

  .rz-state-disabled {
    opacity: 0.5;
  }
}

.rz-timepicker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: $datepicker-calendar-border;
  padding: $timepicker-padding;
  color: $timepicker-color;

  .rzi-chevron-up {
    &:before {
      content: 'expand_less';
    }
  }

  .rzi-chevron-down {
    &:before {
      content: 'expand_more';
    }
  }

  .rz-separator {
    margin: $timepicker-separator-margin;
    a {
      display: none;
    }
  }
}

.rz-hour-picker,
.rz-minute-picker,
.rz-second-picker {
  background-color: $timepicker-background-color;
  width: 4rem;
}